<template>
  <section
    class="pt-28 md:pt-32 pb-16 md:pb-24 bg-gradient-to-b from-primary/5 to-neutral overflow-hidden"
  >
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row items-center">
        <!-- 左侧文字内容 - 淡入上移动画 -->
        <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in-up">
          <!-- 选项卡切换 -->
          <div class="mb-8 border-b border-gray-200">
            <div class="flex space-x-1">
              <button
                v-for="(tab, index) in tabs"
                :key="tab.id"
                @click="activeTab = index"
                class="px-5 py-3 font-medium transition-all duration-300 rounded-t-lg"
                :class="
                  activeTab === index ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100'
                "
              >
                {{ tab.name }}
              </button>
            </div>
          </div>

          <!-- 选项卡内容 -->
          <div v-if="activeTab === 0" class="tab-content">
            <h1
              class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-primary leading-tight text-shadow mb-4"
            >
              发现艺术之美<br />收藏传世珍品
            </h1>
            <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-lg">
              汇聚全球顶级艺术品，为收藏家和艺术爱好者提供专业、透明、安全的拍卖服务
            </p>
          </div>

          <div v-if="activeTab === 1" class="tab-content">
            <h1
              class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-primary leading-tight text-shadow mb-4"
            >
              古董珍玩<br />传承文化价值
            </h1>
            <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-lg">
              精选历代古董文物，每件拍品均经专家鉴定，确保真品，传承中华文化精髓
            </p>
          </div>

          <div v-if="activeTab === 2" class="tab-content">
            <h1
              class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-primary leading-tight text-shadow mb-4"
            >
              近现代书画<br />品味艺术人生
            </h1>
            <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-lg">
              汇集近现代名家书画作品，兼具艺术价值与收藏价值，让艺术融入生活
            </p>
          </div>

          <!-- 按钮区域 -->
          <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <router-link
              to="/auction"
              class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-md transition-all duration-300 transform hover:scale-105 text-center"
            >
              进入拍卖场
            </router-link>
            <router-link
              to="/featured"
              class="bg-white border border-primary text-primary hover:bg-primary/5 font-medium py-3 px-8 rounded-md transition-all duration-300 transform hover:scale-105 text-center"
            >
              浏览精选拍品
            </router-link>
          </div>

          <!-- 用户信息区域 -->
          <div class="mt-10 flex items-center space-x-6 animate-fade-in-up animation-delay-300">
            <div class="flex -space-x-2">
              <img
                src="https://picsum.photos/id/1001/40/40"
                alt="用户头像"
                class="w-10 h-10 rounded-full border-2 border-white"
              />
              <img
                src="https://picsum.photos/id/1002/40/40"
                alt="用户头像"
                class="w-10 h-10 rounded-full border-2 border-white"
              />
              <img
                src="https://picsum.photos/id/1003/40/40"
                alt="用户头像"
                class="w-10 h-10 rounded-full border-2 border-white"
              />
              <div
                class="w-10 h-10 rounded-full border-2 border-white bg-primary/10 flex items-center justify-center text-primary text-xs font-medium"
              >
                99+
              </div>
            </div>
            <div>
              <div class="text-sm text-gray-600">
                已有 <span class="text-primary font-semibold">2,386</span> 位藏家加入
              </div>
              <div class="flex items-center mt-1">
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star-half-o text-yellow-400"></i>
                <span class="ml-1 text-sm text-gray-600">4.8/5</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧图片 - 随选项卡切换 -->
        <div class="md:w-1/2 relative animate-fade-in-right">
          <div
            class="relative rounded-xl overflow-hidden shadow-xl hover-lift transition-all duration-500"
          >
            <!-- 确保图片能正确切换 -->
            <img
              :src="tabData[activeTab].image"
              :alt="tabData[activeTab].title"
              class="w-full h-auto transition-transform duration-700 hover:scale-105"
              :key="tabData[activeTab].id"
            />
            <div
              class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-6"
            >
              <div class="text-white">
                <div class="text-sm uppercase tracking-wider text-white/80 mb-1">
                  {{ tabData[activeTab].category }}
                </div>
                <h3 class="text-xl font-bold mb-2">{{ tabData[activeTab].title }}</h3>
                <div class="flex items-center space-x-4">
                  <div>
                    <div class="text-sm text-white/80">当前出价</div>
                    <div class="text-2xl font-bold counter" :data-target="tabData[activeTab].price">
                      0
                    </div>
                  </div>
                  <div>
                    <div class="text-sm text-white/80">剩余时间</div>
                    <div class="text-lg font-medium">{{ countdown }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 装饰元素 - 脉动动画 -->
          <div
            class="absolute -bottom-6 -left-6 w-24 h-24 bg-secondary/10 rounded-full blur-xl -z-10 animate-pulse"
          ></div>
          <div
            class="absolute -top-6 -right-6 w-32 h-32 bg-primary/10 rounded-full blur-xl -z-10 animate-pulse animation-delay-700"
          ></div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'

// 响应式数据
const countdown = ref('03:45:22')
const activeTab = ref(0) // 默认选中第一个选项卡

// 完整的选项卡数据（包含ID用于正确渲染）
const tabs = ref([
  { id: 'all', name: '全部拍品' },
  { id: 'antiques', name: '古董珍玩' },
  { id: 'calligraphy', name: '书画作品' },
])

// 补全所有选项卡对应的内容数据
const tabData = ref([
  {
    id: 1,
    image: 'https://picsum.photos/id/1050/800/600',
    category: '当代油画专场',
    title: '《晨曦》- 李华作品',
    price: 2850000,
  },
  {
    id: 2,
    image: 'https://picsum.photos/id/1073/800/600',
    category: '明清玉器专场',
    title: '和田玉籽料手镯',
    price: 1580000,
  },
  {
    id: 3,
    image: 'https://picsum.photos/id/1062/800/600',
    category: '近现代书画',
    title: '《山水图》- 张大千',
    price: 3680000,
  },
])

// 监听选项卡变化，确保图片和计数器正确更新
watch(activeTab, () => {
  startCounterAnimation()
})

// 倒计时更新
const updateCountdown = () => {
  const timeParts = countdown.value.split(':')
  let hours = parseInt(timeParts[0])
  let minutes = parseInt(timeParts[1])
  let seconds = parseInt(timeParts[2])

  seconds--
  if (seconds < 0) {
    seconds = 59
    minutes--
    if (minutes < 0) {
      minutes = 59
      hours--
      if (hours < 0) {
        hours = 0
        minutes = 0
        seconds = 0
      }
    }
  }

  countdown.value = `${hours.toString().padStart(2, '0')}:${minutes
    .toString()
    .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}

// 数字增长动画
const startCounterAnimation = () => {
  // 清除现有计数器
  document.querySelectorAll('.counter').forEach((counter) => {
    counter.innerText = '0'
  })

  // 重新启动动画
  const counters = document.querySelectorAll('.counter')
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const counter = entry.target
          const target = +counter.getAttribute('data-target')
          const duration = 2000
          const step = target / (duration / 16)
          let current = 0

          const updateCounter = () => {
            current += step
            if (current < target) {
              counter.innerText = '¥' + Math.ceil(current).toLocaleString()
              requestAnimationFrame(updateCounter)
            } else {
              counter.innerText = '¥' + target.toLocaleString()
            }
          }

          updateCounter()
          observer.unobserve(counter)
        }
      })
    },
    { threshold: 0.5 }
  )

  counters.forEach((counter) => {
    observer.observe(counter)
  })
}

onMounted(() => {
  // 启动倒计时
  const countdownInterval = setInterval(updateCountdown, 1000)

  // 启动数字动画
  startCounterAnimation()

  onUnmounted(() => {
    clearInterval(countdownInterval)
  })
})
</script>

<style>
/* 全局样式，确保选项卡文字颜色能正确应用 */
.bg-primary.text-white {
  color: white !important;
}
</style>

<style scoped>
/* 动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* 动画类 */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
  opacity: 0;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

.animate-pulse {
  animation: pulse 3s infinite;
}

.animation-delay-300 {
  animation-delay: 0.3s;
}

.animation-delay-700 {
  animation-delay: 0.7s;
}

/* 选项卡样式 */
.tab-content {
  animation: fadeInUp 0.5s ease forwards;
}
</style>
